<template>
  <div class="DMContainer">
    <div class="DMItem">
      <v-DeviceMangeItem
        :tableData="tableData"
        tableColumnType="switch"
        :dataTotal="dataTotal"
        :curPage="curPage"
        :pageSize="pageSize"
        @getPaginationCurPage="getPaginationCurPage"
        @getPaginationPageSize="getPaginationPageSize"
        @openDialog="openDialog"
      />
    </div>
    <div class="DMItem">
      <v-DeviceMangeItem
        :tableData="tableData"
        tableColumnType="server"
        :dataTotal="dataTotal"
        :curPage="curPage"
        :pageSize="pageSize"
        @getPaginationCurPage="getPaginationCurPage"
        @getPaginationPageSize="getPaginationPageSize"
        @openDialog="openDialog"
      />
    </div>
    <div class="DMItem">
      <v-DeviceMangeItem
        :tableData="tableData"
        tableColumnType="SANswitch"
        :dataTotal="dataTotal"
        :curPage="curPage"
        :pageSize="pageSize"
        @getPaginationCurPage="getPaginationCurPage"
        @getPaginationPageSize="getPaginationPageSize"
        @openDialog="openDialog"
      />
    </div>
    <div class="DMItem">
      <v-DeviceMangeItem
        :tableData="tableData"
        tableColumnType="storage"
        :dataTotal="dataTotal"
        :curPage="curPage"
        :pageSize="pageSize"
        @getPaginationCurPage="getPaginationCurPage"
        @getPaginationPageSize="getPaginationPageSize"
        @openDialog="openDialog"
      />
    </div>
    <VFormDialog
      :title="dialogType"
      :dialogVisible.sync="dialogVisible"
      :TYPE="dialogFormType"
      :formData="formData"
      @closeDislog="closeDislog"
    />
  </div>
</template>

<script>
import vDeviceMangeItem from "./DeviceManageItem.vue";
import VFormDialog from "../menuComponent/form/formDialog.vue";
export default {
  components: {
    vDeviceMangeItem,
    VFormDialog,
  },
  data() {
    return {
      tableData: [],
      dataTotal: 0,
      curPage: 1,
      pageSize: 10,
      dialogFormType: "",
      dialogType: "",
      dialogVisible: false,
      formData: "",
    };
  },
  methods: {
    getPaginationCurPage(val) {},
    getPaginationPageSize(val) {},
    openDialog(val, data) {
      if (data) {
        this.formData = data;
        this.dialogType = "编辑";
      } else {
        this.formData = "";
        this.dialogType = "添加";
      }
      this.dialogVisible = true;
      this.dialogFormType = val;
    },
    closeDislog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.DMContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  column-gap: 15px;
  row-gap: 15px;
  background: #eeeeee;
  padding: 15px;
  .DMItem {
    border-radius: 5px;
  }
}
</style>
